<script setup>

import { ref,computed,onMounted} from 'vue'
import {allbidder} from '@/api/bidding.js'
import { ElMessage } from 'element-plus'


const bidder = ref([

])

const show=async ()=>{
       let result=await allbidder();
       bidder.value=result.data;
    }
// 在组件挂载时加载数据
onMounted(() => {
  show()
})


// 所有表格数据
const tableData = ref([
  
]);

//用户搜索时选中的分类
const manufacturer=ref('')

//用户搜索时选中的状态
const state=ref('')

import { addBidder} from '@/api/bidderInfo.js';
import { select} from '@/api/tendererInfo.js';

const TendererInfo=async()=>{
    let params={
        manufacturer: manufacturer.value ? manufacturer.value : null,
        state: state.value ? state.value : null
    }
   let result=await select(params)
   console.log(result);
   tableData.value=result.data
}
TendererInfo()

const reset=()=>{
    manufacturer.value='';
    state.value='招标';
    window.location.reload();
}

// 分页状态
const currentPage = ref(1); // 当前页
const pageSize = ref(10);    // 每页显示的数据量

// 计算当前页展示的数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

// 分页切换处理
const handlePageChange = (page) => {
  currentPage.value = page;
};

const formData=ref({
    productBatchNo:'',
    productionDate: '',
    expirationDate: '',
    bidAmount: '',
    depositPaymentDate: '',
})
const tendererData=ref({
    bidder:'',
    legalRepresentative:'',
    contactPhone:'',
    tenderProjectNo:'',
    productBatchNo:'',
    productionDate: '',
    expirationDate: '',
    bidAmount: '',
    depositPaymentDate: '',
})

import userInfoStore from '@/stores/userInfo.js'

const userStore=userInfoStore();

const visibleDialog=ref(false)

const handleApprove=async (row)=>{
    // 处理通过操作
    visibleDialog.value=true

    tendererData.value.bidder=userStore.info.name
    tendererData.value.legalRepresentative=userStore.info.contactName
    tendererData.value.contactPhone=userStore.info.contactPhone
    tendererData.value.tenderProjectNo=row.tenderProjectNo
    }
const submitForm=async ()=>{

    tendererData.value.productBatchNo=formData.value.productBatchNo
    tendererData.value.productionDate=formData.value.productionDate
    tendererData.value.expirationDate=formData.value.expirationDate
    tendererData.value.bidAmount=formData.value.bidAmount
    tendererData.value.depositPaymentDate=formData.depositPaymentDate
    await addBidder(tendererData.value);
    ElMessage.success('投标成功')
    }

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>招标信息</span>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="招标单位：">
                <el-select placeholder="请选择" v-model="manufacturer">
                    <el-option 
                        v-for="c in bidder" 
                        :key="c.id" 
                        :label="c.name"
                        :value="c.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="TendererInfo">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="currentPageData" style="width: 100%">
            <el-table-column label="编号" prop="tenderProjectNo"></el-table-column>
            <el-table-column label="药品名称" prop="drugName"></el-table-column>
            <el-table-column label="制药单位" prop="manufacturer"></el-table-column>
            <el-table-column label="包装要求" prop="packagingReq"></el-table-column>
            <el-table-column label="总量"  prop="totalNumber"></el-table-column>
            <el-table-column label="截止日期" prop="tenderDeadline"></el-table-column>
            <el-table-column label="保证金" prop="bidDeposit"></el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="{ row }">
                    <el-button @click="handleApprove(row)" circle plain type="success">投标</el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="tableData.length" 
                :current-page="currentPage" 
                :page-size="pageSize" 
                @current-change="handlePageChange" />
    </el-card>
    <!-- 弹窗 -->
<el-dialog v-model="visibleDialog" title="投标信息填写" width="30%">
  <!-- 表单容器 -->
  <el-form :model="formData" ref="formRef" label-width="120px">    
    <!-- 产品批号 -->
    <el-form-item label="产品批号" prop="productBatchNo">
      <el-input v-model="formData.productBatchNo" placeholder="请输入产品批号" />
    </el-form-item>
    
    <!-- 生产日期 -->
    <el-form-item label="生产日期" prop="productionDate">
      <el-date-picker v-model="formData.productionDate" type="date" placeholder="请选择生产日期" />
    </el-form-item>
    
    <!-- 有效期 -->
    <el-form-item label="有效期" prop="expirationDate">
      <el-date-picker v-model="formData.expirationDate" type="date" placeholder="请选择有效期" />
    </el-form-item>
    
    <!-- 投标总金额 -->
    <el-form-item label="投标总金额" prop="bidAmount">
      <el-input v-model="formData.bidAmount" placeholder="请输入投标总金额" />
    </el-form-item>
    
    <!-- 投标保证金缴款日期 -->
    <el-form-item label="保证金缴款日期" prop="depositPaymentDate">
      <el-date-picker v-model="formData.depositPaymentDate" type="date" placeholder="请选择缴款日期" />
    </el-form-item>
    
    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="visibleDialog=false">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 70vh; /* 设置为视口的 80%，避免过高 */
    max-height: 80vh; /* 最大高度设置为视口的 90%，防止过高 */
    width: 90%;
    box-sizing: border-box;
    padding: 20px; /* 给容器一些内边距 */
    overflow: auto; /* 当内容超出时允许滚动 */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px; /* 你可以根据需要调整字体大小 */
}

.el-form-item {
    margin-bottom: 16px; /* 适当增加表单项之间的间距 */
}

.el-table {
    width: 100%;
    margin-top: 20px; /* 表格与其他内容之间的间距 */
}

.el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}

.el-button {
    font-size: 14px;
    margin-right: 8px;
}

.el-table-column {
    padding: 10px;
}
.el-select {
  width: 130px; 
}
</style>